import React, { useState } from 'react'
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa6'

//轮播图

const images = [
    'https://picsum.photos/id/237/300/500',
    'https://picsum.photos/id/238/200/300',
    'https://picsum.photos/id/239/200/300',
    'https://picsum.photos/id/240/200/300',
    'https://picsum.photos/id/241/200/300',
    'https://picsum.photos/id/242/200/300'
]

export function warp (min: number, max: number, v: number) {
    const range = max - min
    return ((((v - min) % range) + range) % range) + min
}

export function RotationChart () {

    const [ index, setIndex ] = useState<number>(0)

    const [ dir, setDir ] = useState<'L' | 'R' | null>(null)

    const add = () => {
        setIndex(prevState => warp(0, images.length - 1, index + 1))
        setDir('L')
    }
    const div = () => {
        setIndex(prevState => warp(0, images.length - 1, index - 1))
        setDir('R')
    }

    return (
        <div className={ 'p-20 bg-slate-300' }>
            { dir ?? 'null' }
            <div className={ 'max-w-7xl mx-auto h-100 relative' }>
                <img className={ 'size-full object-center' } src={ images[index] } alt={ '' }/>
                <button className={ 'p-5 absolute left-8 top-1/2 -translate-y-1/2 cursor-pointer' }
                        onClick={ div }>
                    <FaAngleLeft className={ 'text-white text-5xl' }/>
                </button>
                <button className={ 'p-5 absolute right-8 top-1/2 -translate-y-1/2 cursor-pointer' }
                        onClick={ add }>
                    <FaAngleRight className={ 'text-white text-5xl' }/>
                </button>
            </div>
        </div>
    )
}
